<template>
    <div class="followMain">
      <div class="productDiv">
        <div class="pd_left">
          <label class="pdl_title">产品：</label>
          <label class="pdl_name">{{proTitle}}</label>
          <el-popover
            placement="bottom"
            trigger="click">
            <ul class="pro_item">
              <li @click="changePro(p)" v-for="p in productList" style="list-style: none">{{p}}</li>
            </ul>
            <el-button slot="reference" class="pro_change">切换</el-button>
          </el-popover>
        </div>
        <div class="pd_right">
          <el-date-picker
            v-model="monthDate"
            type="month"
            @change="getData"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div class="content">
        <div class="content_top">
          <div class="ct_left" @click="toPpm(oee)">
            <div class="title">{{oee.name}}</div>
            <div class="ctl_data">
              <span v-if="oee.value != '0%'" :class="[
                {'font_color_up ctld_l':oee.yty>0 && oee.up==0},
                {'font_color_down ctld_l':oee.yty>0 && oee.up==1},
                {'font_color_up ctld_l':oee.yty<0 && oee.up==0},
                {'font_color_pass ctld_l':oee.yty==0},
                {'font_color_up ctld_l':oee.yty <0 && oee.up==1}
              ]">{{oee.value}}</span>
              <span class="ctld_r" v-if="oee.value != '0%'">
               <i :class="[
                  {'sky-icon-impup':oee.yty>0 && oee.up==0},
                  {'sky-icon-nordown':oee.yty>0 && oee.up==1},
                  {'sky-icon-lessdown':oee.yty<0 && oee.up==0},
                  {'sky-icon-standard':oee.yty==0}
                  ,{'sky-icon-impdown':oee.yty <0 && oee.up==1}
                ]"></i>
              {{oee.yty}}%
              <span>同比标准</span></span>
              <span style="color: #cccccc;font-size: 57px" v-else>暂无数据</span>
            </div>
            <div id="myCharts" style="height:345px;width:100%"></div>
          </div>
          <div class="ct_right">
            <!-- 第一个小块 -->
            <div class="ctr_box" @click="toPpm(outPoint)">
              <span class="title">{{outPoint.name}}</span>
              <div class="ctr_progress">
                <el-progress type="circle" :percentage="parseFloat(outPoint.value.substring(0,outPoint.value.length - 1))" :stroke-width="8" color="#ff5744" v-if="outPoint.yty >0 && outPoint.up == 0"></el-progress>
                <el-progress type="circle" :percentage="parseFloat(outPoint.value.substring(0,outPoint.value.length - 1))" :stroke-width="8" color="#ff5744" v-if="outPoint.yty < 0 && outPoint.up == 1"></el-progress>
                <el-progress type="circle" :percentage="parseFloat(outPoint.value.substring(0,outPoint.value.length - 1))" :stroke-width="8" color="#63bc4a" v-if="outPoint.yty > 0 && outPoint.up == 1"></el-progress>
                <el-progress type="circle" :percentage="parseFloat(outPoint.value.substring(0,outPoint.value.length - 1))" :stroke-width="8" color="#63bc4a" v-if="outPoint.yty < 0 && outPoint.up == 0"></el-progress>
                <el-progress type="circle" :percentage="parseFloat(outPoint.value.substring(0,outPoint.value.length - 1))" color="#3384dd" :stroke-width="8" v-if="outPoint.yty == 0"></el-progress>
                <el-progress type="circle" :percentage="parseFloat(outPoint.value.substring(0,outPoint.value.length - 1))" color="#fff" :stroke-width="8" v-if="outPoint.yty > 30 && outPoint.up == 0"></el-progress>
              </div>
              <div class="dec">
                <i :class="[{'sky-icon-nordown':outPoint.yty>0 && outPoint.up==1},
              {'sky-icon-impup':outPoint.yty>0 && outPoint.up==0},
              {'sky-icon-lessdown':outPoint.yty<0 && outPoint.up==0},
              {'sky-icon-impdown':outPoint.yty<0 && outPoint.up==1},
              {'sky-icon-standard':outPoint.yty==0},
              {'sky-icon-whitedown':outPoint.yty>30 && outPoint.up==0}]"></i>
                {{outPoint.yty}}% 同比标准
              </div>
            </div>
            <!-- 第二个小块 -->
            <div class="ctr_box" @click="toPpm(ppm)">
              <span class="title">{{ppm.name}}</span>
              <div class="ctr_progress">
                <span class="ctrp_text">{{ppm.value}}</span>
              </div>
              <div  class="dec">
                <i :class="[{'sky-icon-nordown':ppm.yty>0 && ppm.up==1},
              {'sky-icon-impup':ppm.yty>0 && ppm.up==0},
              {'sky-icon-lessdown':ppm.yty<0 && ppm.yty>-30 && ppm.up==0},
              {'sky-icon-impdown':ppm.yty<0 && ppm.yty>-30 && ppm.up==1},
              {'sky-icon-impdown':ppm.yty<-30 && ppm.up==1},
              {'sky-icon-standard':ppm.yty==0},{'sky-icon-lessdown':ppm.yty<-30 && ppm.up==0},
              {'sky-icon-whitedown':ppm.yty>30 && ppm.up==0}]"></i>
                {{ppm.yty}}%   同比标准
              </div>
            </div>
            <!-- 第三个小块 -->
            <div class="ctr_box" @click="toPpm(supplyFailureTimes)">
              <span class="title">{{supplyFailureTimes.name}}</span>
              <div class="ctr_progress">
                <span class="ctrp_text">{{supplyFailureTimes.value}}</span>
              </div>
              <div class="dec">
                <i :class="[{'sky-icon-nordown':supplyFailureTimes.yty>0 && supplyFailureTimes.up==1},
              {'sky-icon-impup':supplyFailureTimes.yty>0 && supplyFailureTimes.up==0},
              {'sky-icon-lessdown':supplyFailureTimes.yty<0 && supplyFailureTimes.yty>-30 && supplyFailureTimes.up==0},
              {'sky-icon-impdown':supplyFailureTimes.yty<0 && supplyFailureTimes.yty>-30 && supplyFailureTimes.up==1},
              {'sky-icon-impdown':supplyFailureTimes.yty<-30 && supplyFailureTimes.up==1},
              {'sky-icon-standard':supplyFailureTimes.yty==0},{'sky-icon-lessdown':supplyFailureTimes.yty<-30 && supplyFailureTimes.up==0},
              {'sky-icon-whitedown':supplyFailureTimes.yty>30 && supplyFailureTimes.up==0}]"></i>

                {{supplyFailureTimes.yty}}% 同比标准
              </div>
            </div>
            <!-- 第四个小块 -->
            <div class="ctr_box" @click="toPpm(planFinishRate)">
              <span class="title">{{planFinishRate.name}}</span>
              <div class="ctr_progress">
                <el-progress type="circle" :percentage="parseFloat(planFinishRate.value.substring(0,planFinishRate.value.length - 1))" :stroke-width="8" v-if="planFinishRate.yty < 0" color="#ff5744"></el-progress>
                <el-progress type="circle" :percentage="parseFloat(planFinishRate.value.substring(0,planFinishRate.value.length - 1))" :stroke-width="8" v-if="planFinishRate.yty > 0" color="#63bc4a"></el-progress>
              </div>
              <div class="dec">
                <i :class="[{'sky-icon-nordown':planFinishRate.yty>0 && planFinishRate.up==1},
              {'sky-icon-impup':planFinishRate.yty>0 && planFinishRate.up==0},
              {'sky-icon-lessdown':planFinishRate.yty<0 && planFinishRate.yty>-30 && planFinishRate.up==0},
              {'sky-icon-impdown':planFinishRate.yty<0 && planFinishRate.yty>-30 && planFinishRate.up==1},
              {'sky-icon-impdown':planFinishRate.yty<-30 && planFinishRate.up==1},
              {'sky-icon-standard':planFinishRate.yty==0},{'sky-icon-lessdown':planFinishRate.yty<-30 && planFinishRate.up==0},
              {'sky-icon-whitedown':planFinishRate.yty>30 && planFinishRate.up==0}]"></i>
                {{planFinishRate.yty}}%  同比标准
              </div>
            </div>
          </div>
        </div>
        <div class="content_bottom">
          <!-- 第一个小块 -->
          <div class="cb_box" @click="toPpm(oncePassRate)">
            <div class="cbb_left">
              <span class="title">{{oncePassRate.name}}</span>
              <span class="num">{{oncePassRate.value}}</span>
              <div class="dec" >
                <i :class="[
              {'sky-icon-nordown':oncePassRate.yty>0 && oncePassRate.up==1},
              {'sky-icon-impup':oncePassRate.yty>0 && oncePassRate.up==0},
              {'sky-icon-lessdown':oncePassRate.yty<0 && oncePassRate.up==0},
              {'sky-icon-impdown':oncePassRate.yty<0 && oncePassRate.up==1},
              {'sky-icon-standard':oncePassRate.yty==0},{'sky-icon-whitedown':oncePassRate.yty<-30}]"></i>
                {{oncePassRate.yty}}%  同比标准
              </div>
            </div>
            <div class="cbb_right">
              <el-progress type="circle" :show-text="false" v-if="oncePassRate.yty>0 && oncePassRate.up==0" :percentage="parseFloat(oncePassRate.value)"  color="#ff5744" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="oncePassRate.yty<0 && oncePassRate.up==1" :percentage="parseFloat(oncePassRate.value)"  color="#ff5744" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="oncePassRate.yty>0 && oncePassRate.up==1" :percentage="parseFloat(oncePassRate.value)"  color="#63bc4a" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="oncePassRate.yty<0 && oncePassRate.up==0" :percentage="parseFloat(oncePassRate.value)"  color="#63bc4a" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="oncePassRate.yty==0" :percentage="parseFloat(oncePassRate.value)"  color="#3384dd" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="oncePassRate.yty>30 && oncePassRate.up==0" :percentage="parseFloat(oncePassRate.value)"  color="#fff" :stroke-width="10"></el-progress>
            </div>
          </div>
          <!-- 第二个小块 -->
          <div class="cb_box" @click="toPpm(fixRate)">
            <div class="cbb_left">
              <span class="title">{{fixRate.name}}</span>
              <span class="num">{{fixRate.value}}</span>
              <div class="dec" >
                <i :class="[
              {'sky-icon-nordown':fixRate.yty>0 && fixRate.up==1},
              {'sky-icon-impup':fixRate.yty>0 && fixRate.up==0},
              {'sky-icon-lessdown':fixRate.yty<0 && fixRate.up==0},
              {'sky-icon-impdown':fixRate.yty<0 && fixRate.up==1},
              {'sky-icon-standard':fixRate.yty==0},{'sky-icon-whitedown':fixRate.yty<-30}]"></i>
                {{fixRate.yty}}%  同比标准
              </div>
            </div>
            <div class="cbb_right">
              <el-progress type="circle" :show-text="false" v-if="fixRate.yty>0 && fixRate.up==0" :percentage="parseFloat(fixRate.value)"  color="#ff5744" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="fixRate.yty<0 && fixRate.up==1" :percentage="parseFloat(fixRate.value)"  color="#ff5744" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="fixRate.yty>0 && fixRate.up==1" :percentage="parseFloat(fixRate.value)"  color="#63bc4a" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="fixRate.yty<0 && fixRate.up==0" :percentage="parseFloat(fixRate.value)"  color="#63bc4a" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="fixRate.yty==0" :percentage="parseFloat(fixRate.value)"  color="#3384dd" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="fixRate.yty>30 && fixRate.up==0" :percentage="parseFloat(fixRate.value)"  color="#fff" :stroke-width="10"></el-progress>
            </div>
          </div>
          <!-- 第三个小块 -->
          <div class="cb_box" @click="toPpm(deviceGoodRate)">
            <div class="cbb_left">
              <span class="title">{{deviceGoodRate.name}}</span>
              <span class="num">{{deviceGoodRate.value}}</span>
              <div class="dec" >
                <i :class="[
              {'sky-icon-nordown':deviceGoodRate.yty>0 && deviceGoodRate.up==1},
              {'sky-icon-impup':deviceGoodRate.yty>0 && deviceGoodRate.up==0},
              {'sky-icon-lessdown':deviceGoodRate.yty<0 && deviceGoodRate.up==0},
              {'sky-icon-impdown':deviceGoodRate.yty<0 && deviceGoodRate.up==1},
              {'sky-icon-standard':deviceGoodRate.yty==0},{'sky-icon-whitedown':deviceGoodRate.yty<-30}]"></i>
                {{deviceGoodRate.yty}}%  同比标准
              </div>
            </div>
            <div class="cbb_right">
              <el-progress type="circle" :show-text="false" v-if="deviceGoodRate.yty>0 && deviceGoodRate.up==0" :percentage="parseFloat(deviceGoodRate.value)"  color="#ff5744" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceGoodRate.yty<0 && deviceGoodRate.up==1" :percentage="parseFloat(deviceGoodRate.value)"  color="#ff5744" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceGoodRate.yty>0 && deviceGoodRate.up==1" :percentage="parseFloat(deviceGoodRate.value)"  color="#63bc4a" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceGoodRate.yty<0 && deviceGoodRate.up==0" :percentage="parseFloat(deviceGoodRate.value)"  color="#63bc4a" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceGoodRate.yty==0" :percentage="parseFloat(deviceGoodRate.value)"  color="#3384dd" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceGoodRate.yty>30 && deviceGoodRate.up==0" :percentage="parseFloat(deviceGoodRate.value)"  color="#fff" :stroke-width="10"></el-progress>
            </div>
          </div>
          <!-- 第四个小块 -->
          <div class="cb_box" @click="toPpm(deviceTroubleTimes)">
            <div class="cbb_left">
              <span class="title">{{deviceTroubleTimes.name}}</span>
              <span class="num">{{deviceTroubleTimes.value}}</span>
              <div class="dec" >
                <i :class="[
              {'sky-icon-nordown':deviceTroubleTimes.yty>0 && deviceTroubleTimes.up==1},
              {'sky-icon-impup':deviceTroubleTimes.yty>0 && deviceTroubleTimes.up==0},
              {'sky-icon-lessdown':deviceTroubleTimes.yty<0 && deviceTroubleTimes.up==0},
              {'sky-icon-impdown':deviceTroubleTimes.yty<0 && deviceTroubleTimes.up==1},
              {'sky-icon-standard':deviceTroubleTimes.yty==0},{'sky-icon-whitedown':deviceTroubleTimes.yty<-30}]"></i>
                {{deviceTroubleTimes.yty}}%  同比标准
              </div>
            </div>
            <div class="cbb_right">
              <el-progress type="circle" :show-text="false" v-if="deviceTroubleTimes.yty>0 && deviceTroubleTimes.up==0" :percentage="parseFloat(deviceTroubleTimes.value)"  color="#ff5744" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceTroubleTimes.yty<0 && deviceTroubleTimes.up==1" :percentage="parseFloat(deviceTroubleTimes.value)"  color="#ff5744" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceTroubleTimes.yty>0 && deviceTroubleTimes.up==1" :percentage="parseFloat(deviceTroubleTimes.value)"  color="#63bc4a" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceTroubleTimes.yty<0 && deviceTroubleTimes.up==0" :percentage="parseFloat(deviceTroubleTimes.value)"  color="#63bc4a" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceTroubleTimes.yty==0" :percentage="parseFloat(deviceTroubleTimes.value)"  color="#3384dd" :stroke-width="10"></el-progress>
              <el-progress type="circle" :show-text="false" v-if="deviceTroubleTimes.yty>30 && deviceTroubleTimes.up==0" :percentage="parseFloat(deviceTroubleTimes.value)"  color="#fff" :stroke-width="10"></el-progress>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import qs from 'qs'
  import {mapActions} from 'vuex'
  export default {
    name: "index",
    data() {
      return {
        // monthDate:new Date(),
        monthDate:'2018-11',
        productList: [],
        proTitle: '',
        oee: '',
        outPoint: '',
        supplyFailureTimes: '',
        planFinishRate: '',
        ppm: '',
        oncePassRate:'',
        fixRate:'',
        deviceGoodRate:'',
        deviceTroubleTimes:'',
      }
    },
    created() {
      let self = this
      self.getDic()
    },
    mounted() {
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //获取首页数据
      getData(){
        let self = this
        if (self.monthDate.length == undefined){
          self.monthTitle = self.getYearMonth2(self.monthDate);
          self.monthDate = self.getYearMonth1(self.monthDate)
        }
        console.log(self.monthDate)
        if (self.proTitle == ''){
          // self.proTitle = 'C519'
          self.proTitle = 'CD539A'
          // self.upstate({key:'protitle',val:'C519'})
          self.upstate({key:'protitle',val:'CD539A'})
        }
        let params = {
          item: self.proTitle,
          month: self.monthDate
        }
        self.$http.get(self.conURL + 'pm/api/homepage/new?' + qs.stringify(params)).then(res => {
          self.oee = res.data.oee
          self.outPoint = res.data.outPoint
          self.ppm = res.data.ppm
          self.supplyFailureTimes = res.data.supplyFailureTimes
          self.planFinishRate = res.data.planFinishRate
          self.oncePassRate = res.data.oncePassRate
          self.fixRate = res.data.fixRate
          self.deviceGoodRate = res.data.deviceGoodRate
          self.deviceTroubleTimes = res.data.deviceTroubleTimes
          let pmNumber = res.data.oee.data
          let ppmTick=[];
          let ppm=[];
          let dayPPm=[];
          let year=new Date().getFullYear();
          let month=new Date().getMonth()+1;
          let day= new Date().getDate();
          let index=0;
          let mydate=new Date(year+'-'+month+'-'+day)/1000;
          if (pmNumber.length>0){
            for (var i=0;i<pmNumber.length;i++){
              if (mydate==pmNumber[i].day){
                ppmTick.push('今日');
                index=i;
                dayPPm.push(Number(pmNumber[i].value))
              }else {
                ppmTick.push(self.getDays(pmNumber[i].day));
                dayPPm.push(Number(0))
              }
              ppm.push(Number(pmNumber[i].value) == '' ? '' : Number(pmNumber[i].value))
            }
            var maxNumber = parseInt(Math.max.apply(null,ppm));
            if (maxNumber < 10){
              maxNumber = maxNumber+1;
            } else if(maxNumber > 10 && maxNumber < 100){
              maxNumber = 100;
            }else{
              let number=parseInt(maxNumber/100);
              if (number<10){
                maxNumber=100*(number+2)
              }else{
                maxNumber=200*(number+2)
              }
            }
            this.drawLine(ppmTick,ppm,dayPPm,maxNumber,index);
          }
        })
      },
      //获取产品列表
      getDic(){
        let self = this
        self.$http.get(self.conURL + 'mongo/api/docs/dictitem/product').then(res => {
          for(let i = 0;i < res.data.length;i++){
            self.productList.push(res.data[i]);
          }
          if (self.proTitle == ''){
            self.proTitle = res.data[0]
            self.upstate({key:'protitle',val:res.data[0]})
          }
          self.getData()
        })
      },
      //制图
      drawLine(ppmTick,ppm,dayPPm,maxNumber,index){
        let self = this
        let myChart = self.$echarts.init(document.getElementById('myCharts'));
        var colors = ['#5793f3', '#d14a61', '#675bba','#fff'];
        myChart.setOption({
          color: colors,
          grid: {
            right: '4%',
            left:'8%',
            borderWidth:0,
            show:false
          },
          legend: {
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisTick: {
                alignWithLabel: false
              },
              data:ppmTick,
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel : {
                textStyle: {
                  color: '#999cb1',
                  fontSize:14
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show:false,
                lineStyle: {
                  color: colors[3]
                }
              },
              axisTick: {
                show: false
              }
            },
            {
              type: 'value',
              // max:maxNumber,
              max: 150,
              min:0,
              position:"left",
              offset:15,
              boundaryGap: false,
              axisTick: {
                show: false
              },
              axisLabel : {
                formatter: '{value}',
                textStyle: {
                  color: '#999cb1',
                  fontSize:14
                }
              },
              axisLine: {
                show:false,
                lineStyle: {
                  color:'#999cb1',
                }
              },
            },
          ],
          series: [
            {
              type:'bar',
              label: {
                normal: {
                  show: false
                }
              },
              barWidth:25,
              yAxisIndex:1,
              symbol:'none',  //这句就是去掉点的
              smooth:true,  //这句就是让曲线变平滑的
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 1, color: '#c9e3ff'},
                      {offset: 0.5, color: '#deeeff'},
                      {offset:0.1 , color: '#f8fbff'},
                      {offset:0 , color: '#fff'}
                    ]
                  )
                }
              },
              data:dayPPm
            },
            {
              type:'line',
              yAxisIndex:1,
              symbol: 'emptyCircle',
              /**
               * 该段莫名会导致线段段落出错，目的不明，暂时屏蔽
               * **/
              // symbolSize:function (value,params) {
              //   if (params.dataIndex==index){
              //     return 6
              //   }else{
              //     return 0
              //   }
              //   if (value==maxNumber){
              //     return 6
              //   }else{
              //     return 0
              //   }
              // },
              label: {
                normal: {
                  show: false
                }
              },
              data:ppm,
              markPoint: {
                itemStyle:{
                  normal: {
                    symbol: 'rect',
                    symbolSize:[54, 25],
                    symbolOffset:[0,'-75%'],
                    color:'#fff',
                    label:{
                      fontSize:14,
                      padding:8,
                      borderRadius:3,
                      color:'#fff',
                      backgroundColor:'#3384dd'
                    }
                  },
                  emphasis: {
                    symbol: 'circle',
                    symbolSize:10,
                    symbolOffset:[0,'25%'],
                    borderColor: '#1e90ff',
                    borderWidth: 5,
                    label: {
                      show: false
                    }
                  }
                },
                effect : {
                  show: true,
                  shadowBlur : 0
                },
                data: [
                  // {type: 'max', name: '最大值'},
                ],
              }
            }
          ]
        })
        myChart.resize();
      },
      //切换产品
      changePro(item){
        let self = this
        self.proTitle = item;
        self.upstate({key:'protitle',val:item})
        self.getData();
      },
      //时间戳获取年月(xxxx-xx)
      getYearMonth1(time){
        let timestamp3 = time;
        let newDate = time;
        let year = newDate.getFullYear();
        let month = (newDate.getMonth()+1) < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1 ;
        return year + "-" + month
      },
      //时间戳获取年月(xxxx年xx月)
      getYearMonth2(time){
        let timestamp3 = time;
        let newDate = new Date();
        let year = newDate.getFullYear();
        let month = (newDate.getMonth()+1) < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1 ;
        return year + "年" + month + '月'
      },
      //时间戳转换成日期
      toTime(time){
        if (time != undefined){
          let timestamp3 = time;
          let newDate = new Date();
          newDate.setTime(timestamp3 * 1000);
          let year = newDate.getFullYear();
          let month = (newDate.getMonth()+1) < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1 ;
          let date = newDate.getDate() < 10? '0' + newDate.getDate() : newDate.getDate();
          let hour = newDate.getHours() < 10? '0' + newDate.getHours() : newDate.getHours();
          let minute = newDate.getMinutes() < 10? '0' + newDate.getMinutes() : newDate.getMinutes();
          let second = newDate.getSeconds() < 10? '0' + newDate.getSeconds() : newDate.getSeconds();
          return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
        }
      },
      //返回日期
      getDays(value){
        var date = new Date(value*1000);
        var Y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (m < 10) {
          m = '0' + m;
        }
        if (d < 10) {
          d = '0' + d;
        }
        return m+'-'+d;
      },
      //前往ppm详情
      toPpm(par){
        let self = this
        self.$router.push({
          path:'/index/ppm',
          query: {
            item: par.target,
            name: "总览-" + par.name,
            time: self.monthDate,
          }
        })
      },
    }
  }
</script>

<style lang="less">
  .followMain{
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    box-sizing: border-box;
    width: 100%;
    background: #f8f8f8;
    padding-bottom: 60px;
    .font_color_up{
      color: #fd5b40 !important;
    }
    .font_color_pass{
      color: #3384dd !important;
    }
    .font_color_down{
      color: #4eb240 !important;
    }
    .productDiv{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 140px;
      .pd_left{
        display: flex;
        flex-direction: row;
        span{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .pdl_title{
          color: #848484;
          line-height: 140px;
          font-size: 28px;
        }
        .pdl_name{
          color: #3b3b3b;
          line-height: 140px;
          font-size: 28px;
          margin-right: 20px;
        }
        .pro_change{
          width: 54px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          font-size: 14px;
          color: #ffffff;
          background: #3384dd;
          border-radius: 50px;
          padding: 0;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
      .pd_right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-input__inner{
          padding-left: 20px;
          background-color: #e5e5e5;
          color: #636363;
          border-radius: 30px;
          border: 0px;
          font-size: 18px;
        }
        .el-icon-date{
          display: none !important;
        }
      }
    }
    .content{
      display: flex;
      flex-direction: column;
      .content_top{
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        .ct_left{
          width: 54%;
          padding: 30px;
          padding-bottom: 0;
          box-sizing: border-box;
          background: #fff;
          border-radius: 5px;
          border: 1px solid #eeeeee;
          display: flex;
          flex-direction: column;
          margin-right: 2%;
          box-shadow: #f8f8f9 0px 0px 15px;
          cursor: pointer;
          .title{
            color: #666666;
            font-size: 22px;
            line-height: 22px;
            margin-bottom: 23px;
          }
          .ctl_data{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .ctld_l{
              font-size: 57px;
              color: #fd5b40;
              line-height: 57px;
            }
            .ctld_r{
              color: #999999;
              font-size: 22px;
              line-height: 30px;
              [class^="sky-icon"]{
                width: 30px;
                height: 30px;
                background: url(../../../assets/imgs/1-2.png) no-repeat;
                display: inline-block;
                vertical-align: middle;
                margin: 0px 3px 0px;
              }
              .sky-icon-impdown{
                background-position: -47px -63px;
              }
              .sky-icon-nordown{
                background-position: -47px -95px;
              }
              .sky-icon-lessdown{
                background-position: -47px -124px;
              }
              .sky-icon-up{
                background-position: -73px -125px;
              }
              .sky-icon-error{
                background-position: -48px -263px;
              }
              .sky-icon-add{
                background-position: -45px -294px;
              }
              .sky-icon-del-img{
                background-position: -44px -385px;
              }
            }
          }
        }
        .ct_right{
          width: 44%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .ctr_box{
            width: 49%;
            padding: 25px;
            padding-bottom: 0;
            box-sizing: border-box;
            margin-right: 2%;
            margin-bottom: 20px;
            background: #fff;
            border-radius: 5px;
            border: 1px solid #eeeeee;
            display: flex;
            flex-direction: column;
            box-shadow: #f8f8f9 0px 0px 15px;
            cursor: pointer;
            .title{
              font-size: 22px;
              color: #666666;
            }
            .ctr_progress{
              width: 110px;
              height: 110px;
              margin-top: 10px;
              display: flex;
              flex-direction: row;
              justify-content: center;
              margin-left: auto;
              margin-right: auto;
              .el-progress-circle{
                width: 110px !important;
                height: 110px !important;
              }
              .ctrp_text{
                color: #222222;
                font-size: 32px;
                margin: auto;
              }
            }
            .dec{
              margin-top: 10px;
              text-align: center;
              color: #999;
              font-size: 16px;
              [class^="sky-icon"]{
                width: 30px;
                height: 30px;
                background: url(../../../assets/imgs/1-2.png) no-repeat;
                display: inline-block;
                vertical-align: middle;
                margin: 0px 3px 0px;
              }
              .sky-icon-standard{
                background-position: -61px -239px;
                width: 20px;
              }
              .sky-icon-impdown{
                background-position: -63px -62px;
                width: 15px;
              }
              .sky-icon-whitedown{
                background-position: -63px -101px;
                width: 15px;
              }
              .sky-icon-lessdown{
                background-position: -63px -144px;
                width: 15px;
              }
              .sky-icon-impup{
                background-position: -111px -192px;
                width: 15px;
              }
            }
          }
          .ctr_box:nth-child(even){
            margin-right: 0;
          }
          .ctr_box:nth-child(3),.ctr_box:nth-child(4){
            margin-bottom: 0;
          }
        }
      }
      .content_bottom{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        .cb_box{
          width: 24.2%;
          margin-left: 1%;
          border: 1px solid #e5e5e5;
          border-radius: 5px;
          background: #fff;
          padding: 20px 20px 10px 20px;
          box-shadow: #f5f5f6 0px 0px 15px;
          display: flex;
          flex-direction: row;
          cursor: pointer;
          .cbb_left{
            display: flex;
            flex-direction: column;
            .title{
              font-size: 18px;
              color: #666666;
              margin-bottom: 10px;
            }
            .num{
              color: #222222;
              font-size: 28px;
            }
            .dec{
              text-align: center;
              color: #999;
              font-size: 16px;
              margin: 0;
              margin-top: 10px;
              [class^="sky-icon"]{
                width: 30px;
                height: 30px;
                background: url(../../../assets/imgs/1-2.png) no-repeat;
                display: inline-block;
                vertical-align: middle;
                margin: 0px 3px 0px;
              }
              .sky-icon-standard{
                background-position: -61px -239px;
                width: 20px;
              }
              .sky-icon-impup{
                background-position: -111px -192px;
                width: 15px;
              }
              .sky-icon-impdown{
                background-position: -63px -62px;
                width: 15px;
              }
              .sky-icon-nordown{
                background-position: -100px -143px;
                width: 15px;
              }
              .sky-icon-lessdown{
                background-position: -63px -144px;
                width: 15px;
              }
            }
          }
          .cbb_right{
            width: 35px;
            height: 35px;
            margin: auto;
            margin-right: 10px;
            .el-progress-circle{
              width: 35px !important;
              height: 35px !important;
            }
          }
        }
        .cb_box:first-child{
          margin-left: 0;
        }
      }
    }
  }
</style>
